The presently disclosed system and method relate generally to configuring a user interface, and more particularly to dynamically configuring elements within a user interface based on user input.
A user interface (UI) is often provided for a user to interact with a device or information concerning the device, the information and/or device hereinafter being referred to as a product. The product and the UI typically interact over a connection, which can be in the form of a direct connection or a network connection, for example. A network connection is often used to provide remote access to the product for the user. The UI typically permits the user to access the product to supply input and receive output. Examples of input mechanisms include a keyboard, a mouse, a display, as well as other devices that permit a user to provide input to a machine. Examples of mechanisms that permit the user to receive information include displays, panels with visual indicators, audio and tactile output devices, and any other type of device that permits a user to receive information from a machine. A UI is often useful to permit a user to configure the product or receive information about the product, in relation to product maintenance, upgrades, configuration, status or operating parameters, for example.
In computer-based systems, a UI is frequently implemented with a client computer (PC) that has a display with a keyboard and a mouse to permit a user to interact with various virtual or physical devices or information. The PC typically has a processor, memory and a network connection for implementing the UI over a network. Generally, the PC can implement the UI using a web browser that can provide access to information concerning a remote product. For example, a UI may present various selectable settings that a user can manipulate with input to the UI. The selectable settings presented to the user are typically configured through an application that renders various types of formatted interface components in the UI. The term “interface components” refers to elements that may be in a display that are often visually available to a user. The sub-elements of an element of a UI are also encompassed within the term “interface components.” Typically, the interface components form only a part of the UI with which the user interacts. A user may interact with the UI, for example, by providing input to an interface component, as well as receiving output from an interface component.
The user may sometimes manipulate some aspects of the interface components to obtain or provide information, for example in conjunction with the product to which the UI is coupled. In the instances where the UI includes a display device, the application responsible for configuring the UI may render and present interface components such as graphical push buttons, check boxes, radio buttons, text boxes, drop-down boxes, tables, menus, links, and other items that may be familiar to a user for making selections, retrieving data or entering information through the UI. Sub-elements of these types of interface components may include table cells, columns, rows, entries in lists, such as components of a drop down box list, and other items that may be associated with an interface component.
An example of a conventional UI and product arrangement involves a client-server network topology, where the client system hosts the UI and the server interacts with the product to facilitate information exchanged between the UI and the product. In such an arrangement, the UI can be provided as a web browser, for example, that communicates with the server using a hypertext transfer protocol (HTTP) over a TCP/IP (transmission control protocol/internet protocol) controlled communication link. The product may be provided as a device, such as a telecommunication gateway, or a service, such as an application running on a server, for example. Typically, the web browser, either through user interaction or through web browser configuration, sends a request to the server to cause a product-related web page to be loaded into the web browser from the server. In response, the server provides a requested web page that may contain HTML (hypertext markup language), XML (extensible markup language) and/or scripting code such as JavaScript. The HTML, XML and/or scripting code operate(s) in the web browser to render the UI with information related to the product. The rendered UI may also permit a user to interact through the UI to modify or configure the product.
Conventionally, the UI is provided in a static configuration, meaning that the UI is constructed with interface components that do not move or have characteristics that do not change. For example, the graphical push buttons, check boxes, radio buttons, text boxes, drop-down boxes, tables, menus and links mentioned above are interface components that are configured based on configuration data provided from the server in a downloaded document, such as an HTML document. The characteristics of the interface components, such as location, color, order of operations, functionality, types of inputs and outputs, as well as other aspects of the interface components, generally do not change once rendered in the UI.
For example, a table provided as an interface component may provide a listing of rules that are processed in a particular order, based on their arrangement within the table. The table is generally static in nature, so that changes made to the table can be somewhat complex in nature. The user may wish, for example, to reorder the rules represented in different rows of the table. The table rows may have varying amounts of data, and may have different data for a similar rule type in different rows. In addition, the table may have columns, the entries for which may be empty for a given row representing a rule. Some of the operations a user may wish to conduct on the table include adding a row, removing a row, reordering rows, and adding, removing or manipulating criteria within different columns of a given row or set of rows.
Referring to FIG. 1, a block diagram of a conceptual structure 100 for composing a conventional UI is illustrated. Structure 100 is an organization of components that may be used to implement a UI through a display 110, which may be responsive to a user input 112. Display 110 provides a visual element 114 that acts as an interface component. The appearance and operation of visual element 114 is governed by an instance of an object 116 located in browser memory 118. Object 116 may accept user input 112 that can influence visual element 114. Object 116 also provides structured data and methods for defining the operation of visual element 114. The data associated with visual element 114 may be provided from a data store 122. The data stored in data store 122 may be structured in an object form to simplify interaction between object 116 and the data in data store 122. The data in data store 122 is mapped to object 116 using a data object index 120. The data associated with visual element 114 may be manipulated by the user with user input 112, which may change the mapping between data store 122 and object 116, as provided by data object index 120. For example, the user may make modifications to the UI by relocating visual element 114. In such an instance, especially where multiple visual elements are moved in display 110, the mapping between object 116 and data object index 120 can become highly complex. The complexity can be particularly increased when parts or all of visual element 114 are deleted. The deletion of part or all of visual element 114 creates gaps or “holes” in data store 122, which makes memory management challenging. The challenge and complexity of memory management can become particularly difficult with a relatively large number of changes such as deletions and/or additions.
Accordingly, with conventional UIs that are static in nature, modifications through the interface components can be complex, difficult and unwieldy. Data associated with an interface component, such as visual element 114, is stored in an object or cache associated with the UI. In an instance where the UI is implemented with a web browser, data associated with an interface component can be stored in an object maintained by script code. The data is mapped to the object using data object index 120. The data may be presented on display 110 through visual element 114 and manipulated by the user (not shown). If a change to the configuration of the UI is desired, the user manipulates visual element 114 as an interface component, such as by moving the interface component to a different location within the browser display. As such changes are made, values to reflect the visual state of the interface component are changed within the object 116 that stores the data for the interface component. An example of a complex manipulation of an interface component is manipulating rows of a table, such as by swapping rows within the table. Such an action is especially complex if each row has a different number of columns or entries. The columns or entries associated with rows in the table can be HTML cells, for example. The manipulation of table rows causes the mapping between data object index 120 and the visual location to become highly complex. The complexity of the mapping between data object index 120 and the visual location is particularly increased when table rows are moved or deleted.
Another drawback to providing an interface component, such as the above-described table that can be manipulated by a user, is that the use of the object does not comply with accepted rules for object-oriented programming related to encapsulation, for example. The concept of encapsulation in relation to object-oriented programming provides for concealment of the functional details of a class from objects related to the class. Encapsulation can enhance an application developed using object-oriented programming by preventing uncertain or abstracted implementations of functions through the use of a well-defined interface with an object. Object-oriented design and programming provides a number of advantages in software management and reduced design complexity, and is generally a preferred software development technique. When manipulation of an interface component is permitted in a web browser, as discussed above, the advantages of the object-oriented paradigm can be lost through lack of encapsulation and increased complexity of the mapping between the data object index and the visual location of interface components.
Referring to FIG. 2, a block diagram shows a software component structure 200 for implementing a customized UI with components that can be manipulated by a user (not shown). A visual element 214 represents data and operations defined by a data store 222. The user interacts with a display 210, upon which visual element 214 is presented, and may provide user input 212 to manipulate the data or operations associated with visual element 214. A data reference 216 coordinates a mapping between data and data store 222 and visual element 214 in keeping with user input 212. Structure 200 can help to reduce some of the complexity associated with mapping data with relocatable visual element 214. The challenge of tracking data associated with visual element 214 following changes in visual representation is met by providing reference 216 associated with visual element 214. Reference 216 serves as map to associate visual element 214 with other forms of data, such as a database key or pointer to additional data. However, provision of an additional reference value is typically specific to particular customized object-oriented applications, and not necessarily generalized web interfaces. In addition, the provision of reference 216 can provide additional complexity for a UI, rather than simplifying relationships.